<template>
  <div
    v-if="isSmall"
    data-log-control="返回顶部"
    @click="backTop"
    class="icon-text-scroll"
    v-show="flagShow"
  >
    &nbsp;&nbsp;&nbsp;&nbsp;TOP
  </div>
  <div
    v-else
    data-log-control="返回顶部"
    @click="backTop"
    class="text-scroll"
    v-show="flagShow"
  >
    TOP
  </div>
</template>
<script>
export default {
  name: "VueScrollTop",
  props: {
    scrollWrapper: {
      require: true,
    },
    isSmall: {
      type: Boolean,
      require: false,
    },
  },
  data() {
    return {
      flagShow: false,
    };
  },
  mounted() {
    this.scrollWrapper.addEventListener("scroll", this.scrollToTop);
  },
  destroyed() {
    this.scrollWrapper.removeEventListener("scroll", this.scrollToTop);
  },
  methods: {
    backTop() {
      let timer = setInterval(() => {
        let ispeed = Math.floor(-this.scrollTop / 5);
        this.$parent.$refs.wrap.scrollTop = this.scrollTop + ispeed;
        if (this.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },
    scrollToTop() {
      let scrollTop = this.scrollWrapper.scrollTop;
      this.scrollTop = scrollTop;
      if (this.scrollTop > 10) {
        this.flagShow = true;
      } else {
        this.flagShow = false;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.text-scroll {
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
  min-width: 50px;
  height: 44px;
  color: #6994ff;
  font-size: 16px;
  border: 2px solid #6994ff;
  opacity: 1;
  border-radius: 6px;
  background: #ffffff;
  &:hover {
    cursor: pointer;
    color: #fff;
    background: #6994ff;
  }
}
.icon-text-scroll {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-around;
  padding-top: 3px;
  min-width: 80px;
  height: 44px;
  color: #6994ff;
  font-size: 16px;
  border: 2px solid #6994ff;
  opacity: 1;
  border-radius: 6px;
  background: #ffffff
    url("#ffffff url() no-repeat 0.12rem 53%")
    no-repeat 12px 53%;
  background-size: 18px 20px;
  cursor: pointer;
  &:hover {
    color: #fff;
    background: #6994ff
      url("#6994ff url() no-repeat 0.12rem 53%")
      no-repeat 12px 53%;
    background-size: 18px 20px;
  }
}
</style>